



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
	<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

	<meta name="description" content=" Instead of displaying the date in a text box, this demo saves dates in drop-down menus. Click the '...' button to display the calendar. As you select dates in the calendar, the drop-down menus are updated. ">
	<meta name="keywords" content="dhtml tools,javascript,DHTML Tools,Javascript,ajax,AJAX,Ajax,ajax tools,AJAX Tools,tools controls,simple javascript tools">
	<title>Zapatec DHTML Calendar Widget - Update Drop-down Menus from a Calendar</title>

	<!-- Common JS files -->
	<script type='text/javascript' src='../../../zapatec/utils/zapatec.js'></script>

	<!-- Custom includes -->	
		<!-- import the calendar script -->
		<script type="text/javascript" src="../../../zapatec/zpcal/src/calendar.js"></script>

		<!-- import the language module -->
		<script type="text/javascript" src="../../../zapatec/zpcal/lang/calendar-en.js"></script>

		<!-- other languages might be available in the lang directory; please check
		your distribution archive. -->


	<!-- ALL demos need these css -->
	<link href="../../../zapatec/website/css/zpcal.css" rel="stylesheet" type="text/css">
	<link href="../../../zapatec/website/css/template.css" rel="stylesheet" type="text/css">
	<style type="text/css">
		body {
			width: 778px;
		}
	</style>

	<!-- Theme css -->
	<link href="../../../zapatec/zpcal/themes/winter.css" rel="stylesheet" type="text/css">

	<link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico">
	

<script type="text/javascript">
	function updateSelect(cal) {
		var date = cal.date;
		var selectMonth = document.getElementById("selectMonth");
		selectMonth.selectedIndex = date.getMonth();
		var selectDay = document.getElementById("selectDay");
		selectDay.selectedIndex = (date.getDate() - 1);
		var selectYear = document.getElementById("selectYear");
		selectYear.selectedIndex = (date.getFullYear() - 2000);
	}
</script>


</head>
<body>	<div class='zpCalSubHeader' style='text-align:center;'>Update Drop-down Menus from a Calendar</div>

		<div class='zpCalDemoText'>
		<ul>
		<li>This demo uses the <b>winter theme</b>.</li>
		
		<li>Instead of displaying the date in a text box, this demo saves dates in drop-down menus.</li>
		<li> Click the '...' button to display the calendar. </li>
		<li> As you select dates in the calendar, the drop-down menus are updated.</li>

		</ul>
		</div>



<form action="">
	<SELECT name='month' id='selectMonth'>
		<OPTION VALUE="0" SELECTED >January</OPTION>
		<OPTION VALUE="1">February</OPTION>
		<OPTION VALUE="2">March</OPTION>
		<OPTION VALUE="3">April</OPTION>
		<OPTION VALUE="4">May</OPTION>
		<OPTION VALUE="5">June</OPTION>
		<OPTION VALUE="6">July</OPTION>
		<OPTION VALUE="7">August</OPTION>
		<OPTION VALUE="8">September</OPTION>
		<OPTION VALUE="9">October</OPTION>
		<OPTION VALUE="10">November</OPTION>
		<OPTION VALUE="11">December</OPTION>
	</SELECT>

	<SELECT name='day' id='selectDay'>
		<OPTION VALUE="1" SELECTED >1</OPTION>
		<OPTION VALUE="2">2</OPTION>
		<OPTION VALUE="3">3</OPTION>
		<OPTION VALUE="4">4</OPTION>
		<OPTION VALUE="5">5</OPTION>
		<OPTION VALUE="6">6</OPTION>
		<OPTION VALUE="7">7</OPTION>
		<OPTION VALUE="8">8</OPTION>
		<OPTION VALUE="9">9</OPTION>
		<OPTION VALUE="10">10</OPTION>
		<OPTION VALUE="11" >11</OPTION>
		<OPTION VALUE="12">12</OPTION>
		<OPTION VALUE="13">13</OPTION>
		<OPTION VALUE="14">14</OPTION>
		<OPTION VALUE="15">15</OPTION>
		<OPTION VALUE="16">16</OPTION>
		<OPTION VALUE="17">17</OPTION>
		<OPTION VALUE="18">18</OPTION>
		<OPTION VALUE="19">19</OPTION>
		<OPTION VALUE="20">20</OPTION>
		<OPTION VALUE="21">21</OPTION>
		<OPTION VALUE="22">22</OPTION>
		<OPTION VALUE="23">23</OPTION>
		<OPTION VALUE="24">24</OPTION>
		<OPTION VALUE="25">25</OPTION>
		<OPTION VALUE="26">26</OPTION>
		<OPTION VALUE="27">27</OPTION>
		<OPTION VALUE="28">28</OPTION>
		<OPTION VALUE="29">29</OPTION>
		<OPTION VALUE="30">30</OPTION>
		<OPTION VALUE="31">31</OPTION>
	</SELECT>

	<SELECT name='year' id='selectYear'>
		<OPTION VALUE="2000" SELECTED >2000</OPTION>
		<OPTION VALUE="2001">2001</OPTION>
		<OPTION VALUE="2002">2002</OPTION>
		<OPTION VALUE="2003">2003</OPTION>
		<OPTION VALUE="2004">2004</OPTION>
		<OPTION VALUE="2005">2005</OPTION>
		<OPTION VALUE="2006">2006</OPTION>
		<OPTION VALUE="2007">2007</OPTION>
		<OPTION VALUE="2008">2008</OPTION>
	</SELECT>

		<input type="reset" value=" ... " id='button10'>
	</form>
		<div id="sel10">
		</div>

		<script type="text/javascript">
		var cal = new Zapatec.Calendar.setup({
		
				inputField     :    "sel10",     // id of the input field
				ifFormat       :    "%Y-%m-%d",     // format of the input field
				button         :    "button10",  // What will trigger the popup of the calendar
				onUpdate       :     updateSelect,
				showsTime      :     false      //don't show time, only date

		});
		
	</script>


	<noscript>
		<br/>
		This page uses an <a href='http://www.zapatec.com/website/main/products/suite/'>
		AJAX Component</a> - Zapatec DHTML Calendar Widget, but your browser does not support Javascript.
		<br/>
		<br/>
	</noscript>      
		<br/><br/><br/>
		<div class="footer" style='width: 778px; text-align:center; margin-top:2em'>
		&copy; 2004-2007 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong>
		</div>
</body>
</html>
